<template>
  <div class="spread-manage page">
    <van-nav-bar
        title="新增邀请码"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="wrapper">
      <div class="group">
        <van-field label="邀请码" placeholder="请输入邀请码">
          <template #right-icon>
            <div class="van-field__right-icon">
              <div class="random-invite">生成邀请码</div>
            </div>
          </template>
        </van-field>
        <van-field label="邀请码状态">
          <template #input>
            <div class="invite-status">
              <van-switch v-model="enable" inactive-value="0" active-value="1" active-color="#11c64d" />
              <span class="status-text active">启用邀请码</span></div>
          </template>
        </van-field>

        <van-button class="submit-btn active" text="创建邀请码" />
      </div>
    </div>
    <div class="van-overlay mask" style="z-index: 10; animation-duration: 0.35s; display: none;">
    </div>
  </div>
</template>
<script>
export default {
  name: "EditUser",
  data: function () {
    return {
      enable: '0'
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.spread-manage {
  bottom: 0
}

.spread-manage .nav {
  background: linear-gradient(90deg,#fff,#fff)
}

.spread-manage .wrapper {
  height: calc(100% - 1.22667rem);
  overflow-y: auto;
  background-color: #f4ebf3;
  -webkit-overflow-scrolling: touch
}

.spread-manage .wrapper .group .van-field__label {
  color: #7d7c7c
}

.spread-manage .wrapper .group .random-invite {
  padding: 0 .26667rem;
  line-height: .74667rem;
  border: .02667rem solid #fa59b5;
  color: #fa59b5;
  font-size: .26667rem;
  border-radius: .66667rem
}

.spread-manage .wrapper .group .invite-status {
  display: flex;
  align-items: center
}

.spread-manage .wrapper .group .invite-status .status-text {
  margin-left: .26667rem;
  font-size: .37333rem;
  color: #979799
}

.spread-manage .wrapper .group .invite-status .status-text.active {
  color: #11c64d
}

.spread-manage .wrapper .group .content-text {
  font-size: .37333rem;
  color: #fa59b5
}

.spread-manage .wrapper .group .slide-item {
  font-size: 0
}

.spread-manage .wrapper .group .slide-item .slide-item-text {
  line-height: .42667rem;
  font-size: .32rem;
  text-align: center;
  color: #ff253f
}

.spread-manage .wrapper .group .submit-btn {
  margin: .53333rem 7% 0;
  width: 86%;
  height: 1.17333rem;
  border-radius: .66667rem;
  background-color: #cacaca;
  color: #fff;
  font-size: .42667rem;
  font-weight: bolder;
  border: none
}

.spread-manage .wrapper .group .submit-btn.active {
  color: #fff;
  background: linear-gradient(90deg,#fa59b5,#e38afb)
}

.spread-manage .mask {
  background-color: rgba(151,151,153,.4)
}

.spread-manage .picker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10
}

.spread-manage .picker .van-picker__mask {
  background: transparent!important
}

.spread-manage .picker .van-picker__columns {
  background-color: #f2f2f5
}

.spread-manage .picker .van-picker-column__item--selected {
  width: 94%;
  margin: auto;
  border-radius: .16rem;
  background-color: #fcf0fa
}

</style>
